<template>
  <view class="appointment-container">
    <!-- 顶部导航 -->
    <view class="header-nav">
      <view class="nav-tabs">
        <view 
          class="nav-tab" 
          :class="{ 'active': currentTab === 'booking' }"
          @click="switchTab('booking')"
        >
          预约挂号
        </view>
        <view 
          class="nav-tab" 
          :class="{ 'active': currentTab === 'myAppointments' }"
          @click="switchTab('myAppointments')"
        >
          我的预约
        </view>
      </view>
    </view>

    <!-- 预约挂号页面 -->
    <view class="tab-content" v-if="currentTab === 'booking'">
      <!-- 医院选择 -->
      <view class="section hospital-section">
        <view class="section-header">
          <text class="section-title">选择医院</text>
          <view class="location-btn" @click="refreshLocation">
            <text class="iconfont icon-location"></text>
            <text class="location-text">{{ locationText || '定位中...' }}</text>
          </view>
        </view>
        
        <view class="hospital-search">
          <view class="search-box">
            <text class="iconfont icon-search search-icon"></text>
            <input 
              type="text" 
              v-model="hospitalSearchKey"
              placeholder="搜索医院名称"
              class="search-input"
              @input="searchHospitals"
            />
          </view>
        </view>

        <view class="hospital-list">
          <view 
            class="hospital-item" 
            :class="{ 'selected': selectedHospital?.id === hospital.id }"
            v-for="hospital in filteredHospitals" 
            :key="hospital.id"
            @click="selectHospital(hospital)"
          >
            <view class="hospital-info">
              <view class="hospital-name">{{ hospital.name }}</view>
              <view class="hospital-level">{{ hospital.level }}</view>
              <view class="hospital-address">{{ hospital.address }}</view>
            </view>
            <view class="hospital-meta">
              <view class="hospital-distance" v-if="hospital.distance">
                {{ hospital.distance }}km
              </view>
              <view class="hospital-status" :class="hospital.status">
                {{ hospital.statusText }}
              </view>
            </view>
            <view class="select-indicator" v-if="selectedHospital?.id === hospital.id">
              <text class="iconfont icon-check"></text>
            </view>
          </view>
        </view>
      </view>

      <!-- 科室选择 -->
      <view class="section department-section" v-if="selectedHospital">
        <view class="section-header">
          <text class="section-title">选择科室</text>
          <view class="filter-btn" @click="showDepartmentFilter">
            <text class="iconfont icon-filter"></text>
            筛选
          </view>
        </view>

        <view class="department-categories">
          <scroll-view scroll-x class="category-scroll">
            <view class="category-list">
              <view 
                class="category-item"
                :class="{ 'active': selectedCategory === category.id }"
                v-for="category in departmentCategories"
                :key="category.id"
                @click="selectCategory(category.id)"
              >
                {{ category.name }}
              </view>
            </view>
          </scroll-view>
        </view>

        <view class="department-list">
          <view 
            class="department-item"
            :class="{ 'selected': selectedDepartment?.id === department.id }"
            v-for="department in filteredDepartments"
            :key="department.id"
            @click="selectDepartment(department)"
          >
            <view class="department-info">
              <view class="department-name">{{ department.name }}</view>
              <view class="department-desc">{{ department.description }}</view>
              <view class="department-stats">
                <text class="stat-item">医生 {{ department.doctorCount }}人</text>
                <text class="stat-item">今日余号 {{ department.availableSlots }}个</text>
              </view>
            </view>
            <view class="department-arrow">
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view>
      </view>

      <!-- 医生选择 -->
      <view class="section doctor-section" v-if="selectedDepartment">
        <view class="section-header">
          <text class="section-title">选择医生</text>
          <view class="date-selector" @click="showDatePicker">
            <text class="selected-date">{{ selectedDate || '选择日期' }}</text>
            <text class="iconfont icon-calendar"></text>
          </view>
        </view>

        <view class="doctor-list">
          <view 
            class="doctor-item"
            v-for="doctor in filteredDoctors"
            :key="doctor.id"
            @click="selectDoctor(doctor)"
          >
            <view class="doctor-avatar">
              <image :src="doctor.avatar" class="avatar-img" />
            </view>
            <view class="doctor-info">
              <view class="doctor-name">{{ doctor.name }}</view>
              <view class="doctor-title">{{ doctor.title }}</view>
              <view class="doctor-specialty">{{ doctor.specialty }}</view>
              <view class="doctor-experience">从医 {{ doctor.experience }}</view>
            </view>
            <view class="doctor-rating">
              <view class="rating-stars">
                <text class="iconfont icon-star" v-for="n in 5" :key="n" :class="{ 'filled': n <= doctor.rating }"></text>
              </view>
              <view class="rating-score">{{ doctor.rating }}</view>
            </view>
            <view class="doctor-price">
              <text class="price-label">挂号费</text>
              <text class="price-value">¥{{ doctor.price }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 时间选择 -->
      <view class="section time-section" v-if="selectedDoctor">
        <view class="section-header">
          <text class="section-title">选择时间</text>
          <view class="period-toggle">
            <view 
              class="period-item"
              :class="{ 'active': selectedPeriod === 'morning' }"
              @click="selectedPeriod = 'morning'"
            >
              上午
            </view>
            <view 
              class="period-item"
              :class="{ 'active': selectedPeriod === 'afternoon' }"
              @click="selectedPeriod = 'afternoon'"
            >
              下午
            </view>
          </view>
        </view>

        <view class="time-slots">
          <view 
            class="time-slot"
            :class="{ 
              'selected': selectedTimeSlot === slot.time,
              'disabled': !slot.available 
            }"
            v-for="slot in filteredTimeSlots"
            :key="slot.time"
            @click="selectTimeSlot(slot)"
          >
            <view class="slot-time">{{ slot.time }}</view>
            <view class="slot-status">{{ slot.available ? '可预约' : slot.reason }}</view>
          </view>
        </view>
      </view>

      <!-- 预约确认 -->
      <view class="confirm-section" v-if="canConfirm">
        <view class="confirm-card">
          <view class="card-header">
            <text class="card-title">预约信息确认</text>
          </view>
          <view class="confirm-info">
            <view class="info-row">
              <text class="info-label">医院：</text>
              <text class="info-value">{{ selectedHospital?.name }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">科室：</text>
              <text class="info-value">{{ selectedDepartment?.name }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">医生：</text>
              <text class="info-value">{{ selectedDoctor?.name }} {{ selectedDoctor?.title }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">时间：</text>
              <text class="info-value">{{ selectedDate }} {{ selectedTimeSlot }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">挂号费：</text>
              <text class="info-value price">¥{{ selectedDoctor?.price }}</text>
            </view>
          </view>
          <button 
            class="confirm-btn"
            :class="{ 'loading': bookingLoading }"
            @click="confirmBooking"
          >
            <text v-if="bookingLoading" class="iconfont icon-loading loading-icon"></text>
            {{ bookingLoading ? '预约中...' : '确认预约' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 我的预约页面 -->
    <view class="tab-content" v-if="currentTab === 'myAppointments'">
      <view class="appointment-filter">
        <view class="filter-tabs">
          <view 
            class="filter-tab"
            :class="{ 'active': appointmentFilter === filter.key }"
            v-for="filter in appointmentFilters"
            :key="filter.key"
            @click="filterAppointments(filter.key)"
          >
            {{ filter.label }}
            <view class="filter-badge" v-if="filter.count > 0">{{ filter.count }}</view>
          </view>
        </view>
      </view>

      <view class="appointment-list">
        <view 
          class="appointment-item"
          v-for="appointment in filteredAppointments"
          :key="appointment.id"
          @click="viewAppointmentDetail(appointment)"
        >
          <view class="appointment-header">
            <view class="appointment-date">{{ formatDate(appointment.appointmentDate) }}</view>
            <view class="appointment-status" :class="appointment.status">
              {{ getStatusText(appointment.status) }}
            </view>
          </view>
          
          <view class="appointment-content">
            <view class="appointment-hospital">{{ appointment.hospitalName }}</view>
            <view class="appointment-doctor">
              {{ appointment.departmentName }} · {{ appointment.doctorName }}
            </view>
            <view class="appointment-time">{{ appointment.timeSlot }}</view>
          </view>

          <view class="appointment-actions" v-if="appointment.status === 'confirmed'">
            <button class="action-btn cancel-btn" @click.stop="cancelAppointment(appointment)">
              取消预约
            </button>
            <button class="action-btn reschedule-btn" @click.stop="rescheduleAppointment(appointment)">
              改期
            </button>
          </view>

          <view class="appointment-queue" v-if="appointment.queueNumber && appointment.status === 'confirmed'">
            <text class="queue-label">排队号：</text>
            <text class="queue-number">{{ appointment.queueNumber }}</text>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="filteredAppointments.length === 0">
          <image src="/static/images/empty-appointment.png" class="empty-image" />
          <view class="empty-text">暂无预约记录</view>
          <button class="empty-btn" @click="switchTab('booking')">
            立即预约
          </button>
        </view>
      </view>
    </view>

    <!-- 日期选择器 -->
    <date-picker 
      :show="showDatePickerModal"
      :current-date="selectedDate"
      @confirm="handleDateConfirm"
      @cancel="showDatePickerModal = false"
    />

    <!-- 科室筛选弹窗 -->
    <department-filter
      :show="showDepartmentFilterModal"
      :categories="departmentCategories"
      :selected-category="selectedCategory"
      @confirm="handleFilterConfirm"
      @cancel="showDepartmentFilterModal = false"
    />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import DatePicker from '@/components/common/DatePicker.vue'
import DepartmentFilter from '@/components/appointment/DepartmentFilter.vue'

export default {
  name: 'AppointmentPage',
  components: {
    DatePicker,
    DepartmentFilter
  },
  data() {
    return {
      currentTab: 'booking',
      currentTabIndex: 0,
      tabList: [
        { name: '预约挂号' },
        { name: '我的预约' }
      ],
      
      // 搜索和筛选
      hospitalSearchKey: '',
      selectedCategory: '',
      appointmentFilter: 'all',
      
      // 选择状态
      selectedHospital: null,
      selectedDepartment: null,
      selectedDoctor: null,
      selectedDate: '',
      selectedTimeSlot: '',
      selectedPeriod: 'morning',
      
      // 加载状态
      bookingLoading: false,
      
      // 弹窗状态
      showDatePickerModal: false,
      showDepartmentFilterModal: false,
      
      // 网络状态
      hasShownNetworkTip: false,
      
      // 筛选选项
      appointmentFilters: [
        { key: 'all', label: '全部', count: 0 },
        { key: 'confirmed', label: '待就诊', count: 0 },
        { key: 'completed', label: '已完成', count: 0 },
        { key: 'cancelled', label: '已取消', count: 0 }
      ],
      
      // Mock数据 - 与数据库保持一致
      mockHospitals: [
        {
          id: 'h001',
          name: '河北省保定市莲池区保定市第一医院',
          level: '三甲',
          address: '河北省保定市莲池区东风东路572号',
          phone: '0312-5976120',
          city: '保定',
          distance: 0.5,
          status: 'open',
          statusText: '正常接诊'
        },
        {
          id: 'h002',
          name: '河北省保定市竞秀区保定市人民医院',
          level: '三甲',
          address: '保定市竞秀区长城北大街320号',
          phone: '0312-5976666',
          city: '保定',
          distance: 1.2,
          status: 'busy',
          statusText: '号源紧张'
        },
        {
          id: 'h003',
          name: '保定市中医院',
          level: '三甲',
          address: '保定市莲池区裕华东路530号',
          phone: '0312-5976888',
          city: '保定',
          distance: 2.1,
          status: 'open',
          statusText: '正常接诊'
        }
      ],
      
      departmentCategories: [
        { id: '', name: '全部' },
        { id: 'internal', name: '内科' },
        { id: 'surgical', name: '外科' },
        { id: 'pediatric', name: '儿科' },
        { id: 'gynecology', name: '妇科' },
        { id: 'emergency', name: '急诊科' }
      ],
      
      mockDepartments: [
        {
          id: 'd001',
          name: '心血管内科',
          category: 'internal',
          description: '心脏病、高血压等心血管疾病诊治',
          doctorCount: 15,
          availableSlots: 8
        },
        {
          id: 'd002',
          name: '消化内科',
          category: 'internal',
          description: '胃肠道、肝胆胰等消化系统疾病',
          doctorCount: 12,
          availableSlots: 5
        },
        {
          id: 'd003',
          name: '呼吸内科',
          category: 'internal',
          description: '呼吸系统疾病诊治',
          doctorCount: 10,
          availableSlots: 6
        },
        {
          id: 'd004',
          name: '普通外科',
          category: 'surgical',
          description: '外科手术及相关疾病治疗',
          doctorCount: 18,
          availableSlots: 12
        },
        {
          id: 'd005',
          name: '骨科',
          category: 'surgical',
          description: '骨骼、关节疾病诊治',
          doctorCount: 16,
          availableSlots: 9
        },
        {
          id: 'd006',
          name: '儿科',
          category: 'pediatric',
          description: '儿童常见疾病诊治',
          doctorCount: 14,
          availableSlots: 7
        },
        {
          id: 'd007',
          name: '妇产科',
          category: 'gynecology',
          description: '妇科疾病及产前产后护理',
          doctorCount: 13,
          availableSlots: 4
        },
        {
          id: 'd008',
          name: '急诊科',
          category: 'emergency',
          description: '急诊医疗服务',
          doctorCount: 20,
          availableSlots: 15
        }
      ],
      
      mockDoctors: [
        {
          id: 'doc001',
          name: '张主任',
          title: '主任医师',
          specialty: '心血管内科',
          experience: '15年',
          avatar: '/static/images/doctor1.jpg',
          rating: 4.8,
          price: 50
        },
        {
          id: 'doc002',
          name: '李医生',
          title: '副主任医师',
          specialty: '心血管内科',
          experience: '12年',
          avatar: '/static/images/doctor2.jpg',
          rating: 4.6,
          price: 40
        },
        {
          id: 'doc003',
          name: '王医生',
          title: '主治医师',
          specialty: '消化内科',
          experience: '8年',
          avatar: '/static/images/doctor3.jpg',
          rating: 4.5,
          price: 35
        }
      ],
      
      mockTimeSlots: [
        { time: '08:00-08:30', period: 'morning', available: true },
        { time: '08:30-09:00', period: 'morning', available: true },
        { time: '09:00-09:30', period: 'morning', available: false, reason: '已满' },
        { time: '09:30-10:00', period: 'morning', available: true },
        { time: '10:00-10:30', period: 'morning', available: true },
        { time: '10:30-11:00', period: 'morning', available: false, reason: '已约满' },
        { time: '11:00-11:30', period: 'morning', available: true },
        { time: '14:00-14:30', period: 'afternoon', available: true },
        { time: '14:30-15:00', period: 'afternoon', available: true },
        { time: '15:00-15:30', period: 'afternoon', available: true },
        { time: '15:30-16:00', period: 'afternoon', available: false, reason: '医生休息' },
        { time: '16:00-16:30', period: 'afternoon', available: true },
        { time: '16:30-17:00', period: 'afternoon', available: true }
      ]
    }
  },
  computed: {
    ...mapState('appointment', ['myAppointments', 'hospitals', 'departments', 'doctors', 'timeSlots']),
    ...mapState('location', ['currentLocation']),
    
    // 格式化位置文本
    locationText() {
      if (!this.currentLocation) return '定位中...'
      if (typeof this.currentLocation === 'string') return this.currentLocation
      if (this.currentLocation.address) return this.currentLocation.address
      if (this.currentLocation.city && this.currentLocation.district) {
        return `${this.currentLocation.city} ${this.currentLocation.district}`
      }
      return '位置获取中...'
    },
    
    // 过滤后的医院列表
    filteredHospitals() {
      // 优先使用store中的数据，fallback到本地Mock数据
      const hospitalList = this.hospitals && this.hospitals.length > 0 
        ? this.hospitals 
        : this.$data.mockHospitals || []
      
      if (!this.hospitalSearchKey) return hospitalList
      return hospitalList.filter(hospital => 
        hospital.name.includes(this.hospitalSearchKey)
      )
    },
    
    // 过滤后的科室列表
    filteredDepartments() {
      // 优先使用store中的数据，如果为空则使用Mock数据
      const departmentList = (this.departments && this.departments.length > 0) 
        ? this.departments 
        : this.$data.mockDepartments || []
      
      // selectedCategory为空字符串时显示所有科室
      if (!this.selectedCategory || this.selectedCategory === '') {
        return departmentList
      }
      return departmentList.filter(dept => dept.category === this.selectedCategory)
    },
    
    // 过滤后的医生列表
    filteredDoctors() {
      // 优先使用store中的数据，如果为空则使用Mock数据
      const doctorList = (this.doctors && this.doctors.length > 0) 
        ? this.doctors 
        : this.$data.mockDoctors || []
      return doctorList
    },
    
    // 过滤后的时间段
    filteredTimeSlots() {
      // 优先使用store中的数据，如果为空则使用Mock数据
      const timeSlotList = (this.timeSlots && this.timeSlots.length > 0) 
        ? this.timeSlots 
        : this.$data.mockTimeSlots || []
      
      return timeSlotList.filter(slot => {
        // 如果slot有period字段（Mock数据），直接使用
        if (slot.period) {
          return slot.period === this.selectedPeriod
        }
        
        // 如果没有period字段（API数据），根据时间判断
        const timeStr = slot.time.split('-')[0] // 取开始时间，如"08:00"
        const hour = parseInt(timeStr.split(':')[0])
        
        if (this.selectedPeriod === 'morning') {
          return hour < 12
        } else {
          return hour >= 12
        }
      })
    },
    
    // 过滤后的预约列表
    filteredAppointments() {
      if (this.appointmentFilter === 'all') return this.myAppointments
      return this.myAppointments.filter(apt => apt.status === this.appointmentFilter)
    },
    
    // 是否可以确认预约
    canConfirm() {
      return this.selectedHospital && 
             this.selectedDepartment && 
             this.selectedDoctor && 
             this.selectedDate && 
             this.selectedTimeSlot
    }
  },
  onLoad() {
    this.initPage()
  },
  onShow() {
    this.refreshData()
  },
  onPullDownRefresh() {
    this.refreshData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    ...mapActions('appointment', [
      'getMyAppointments', 
      'createAppointment', 
      'cancelAppointmentById',
      'getHospitals',
      'getDepartments',
      'getDoctors',
      'getTimeSlots'
    ]),
    ...mapActions('location', ['getCurrentLocation']),

    // 初始化页面
    async initPage() {
      try {
        await this.getCurrentLocation()
        await this.loadInitialData()
        await this.getMyAppointments()
        this.updateFilterCounts()
        
        // 初始化完成，等待用户手动选择医院
      } catch (error) {
        console.error('初始化失败:', error)
      }
    },

    // 加载初始数据
    async loadInitialData() {
      try {
        // 获取医院列表
        const result = await this.getHospitals({
          city: '保定', // 可以根据用户位置动态获取
          page: 1,
          limit: 50
        })
        
        // 如果使用了Mock数据，显示提示
        if (result && result.isMockData) {
          this.showNetworkTip()
        }
      } catch (error) {
        console.error('加载初始数据失败:', error)
        this.showNetworkTip()
      }
    },

    // 显示网络异常提示
    showNetworkTip() {
      // 避免重复显示
      if (this.hasShownNetworkTip) return
      this.hasShownNetworkTip = true
      
      setTimeout(() => {
        uni.showModal({
          title: '网络提示',
          content: '当前无法连接服务器，正在使用演示数据。\n\n要连接真实服务器，请：\n• 检查网络连接\n• 确认后端服务运行\n• 或切换到本地开发模式',
          confirmText: '知道了',
          cancelText: '设置',
          success: (res) => {
            if (res.cancel) {
              // 跳转到开发者设置 - 暂时用提示代替
              uni.showModal({
                title: '开发者设置',
                content: '开发者设置功能开发中。\n\n如需连接真实服务器，请：\n1. 确保后端服务正在运行\n2. 检查网络连接\n3. 联系技术支持',
                confirmText: '知道了',
                showCancel: false
              })
            }
          }
        })
      }, 1000)
    },

    // 刷新数据
    async refreshData() {
      try {
        await this.getMyAppointments()
        this.updateFilterCounts()
      } catch (error) {
        console.error('刷新失败:', error)
      }
    },

    // 切换标签
    switchTab(tab) {
      this.currentTab = tab
      if (tab === 'myAppointments') {
        this.getMyAppointments()
      }
    },

    // 处理uView Tab切换
    handleTabChange(index) {
      this.currentTabIndex = index
      const tabs = ['booking', 'myAppointments']
      this.currentTab = tabs[index]
      if (this.currentTab === 'myAppointments') {
        this.getMyAppointments()
      }
    },

    // 搜索医院
    searchHospitals() {
      // 实际项目中这里会调用API搜索
      console.log('搜索医院:', this.hospitalSearchKey)
    },

    // 刷新位置
    async refreshLocation() {
      try {
        await this.getCurrentLocation()
      } catch (error) {
        uni.showToast({
          title: '定位失败',
          icon: 'error'
        })
      }
    },

    // 选择医院
    selectHospital(hospital) {
      this.selectedHospital = hospital
      this.selectedDepartment = null
      this.selectedDoctor = null
      this.selectedDate = ''
      this.selectedTimeSlot = ''
      
      // 获取医院的科室信息
      this.loadDepartments(hospital.id)
    },

    // 选择科室分类
    selectCategory(categoryId) {
      this.selectedCategory = categoryId
    },

    // 选择科室
    selectDepartment(department) {
      this.selectedDepartment = department
      this.selectedDoctor = null
      this.selectedDate = ''
      this.selectedTimeSlot = ''
      
      // 获取科室的医生信息
      this.loadDoctors(department.id)
    },

    // 选择医生
    selectDoctor(doctor) {
      this.selectedDoctor = doctor
      this.selectedDate = ''
      this.selectedTimeSlot = ''
      
      // 设置默认日期为明天
      const tomorrow = new Date()
      tomorrow.setDate(tomorrow.getDate() + 1)
      this.selectedDate = tomorrow.toISOString().split('T')[0]
      
      // 获取医生的时间段
      this.loadTimeSlots(doctor.id, this.selectedDate)
    },

    // 选择时间段
    selectTimeSlot(slot) {
      if (!slot.available) return
      this.selectedTimeSlot = slot.time
    },

    // 显示日期选择器
    showDatePicker() {
      this.showDatePickerModal = true
    },

    // 确认日期选择
    handleDateConfirm(date) {
      this.selectedDate = date
      this.selectedTimeSlot = ''
      this.showDatePickerModal = false
      
      if (this.selectedDoctor) {
        this.loadTimeSlots(this.selectedDoctor.id, date)
      }
    },

    // 显示科室筛选
    showDepartmentFilter() {
      this.showDepartmentFilterModal = true
    },

    // 确认筛选
    handleFilterConfirm(categoryId) {
      this.selectedCategory = categoryId
      this.showDepartmentFilterModal = false
    },

    // 确认预约
    async confirmBooking() {
      if (!this.canConfirm || this.bookingLoading) return

      try {
        this.bookingLoading = true
        
        const appointmentData = {
          hospitalId: this.selectedHospital.id,
          hospitalName: this.selectedHospital.name,
          departmentId: this.selectedDepartment.id,
          departmentName: this.selectedDepartment.name,
          doctorId: this.selectedDoctor.id,
          doctorName: this.selectedDoctor.name,
          appointmentDate: this.selectedDate,
          timeSlot: this.selectedTimeSlot,
          price: this.selectedDoctor.price
        }

        const result = await this.createAppointment(appointmentData)
        
        // 根据是否为Mock数据显示不同提示
        if (result && result.isMockData) {
          uni.showModal({
            title: '预约成功（演示模式）',
            content: '当前为演示模式，预约信息仅用于功能展示。\n\n要进行真实预约，请连接到后端服务器。',
            confirmText: '知道了',
            showCancel: false
          })
        } else {
          uni.showToast({
            title: '预约成功',
            icon: 'success'
          })
        }

        // 跳转到我的预约
        setTimeout(() => {
          this.switchTab('myAppointments')
          this.resetSelection()
        }, 1500)

      } catch (error) {
        console.error('预约失败:', error)
        uni.showToast({
          title: error.message || '预约失败',
          icon: 'error'
        })
      } finally {
        this.bookingLoading = false
      }
    },

    // 重置选择
    resetSelection() {
      this.selectedHospital = null
      this.selectedDepartment = null
      this.selectedDoctor = null
      this.selectedDate = ''
      this.selectedTimeSlot = ''
      this.selectedPeriod = 'morning'
    },

    // 筛选预约
    filterAppointments(filterKey) {
      this.appointmentFilter = filterKey
    },

    // 更新筛选数量
    updateFilterCounts() {
      this.appointmentFilters.forEach(filter => {
        if (filter.key === 'all') {
          filter.count = this.myAppointments.length
        } else {
          filter.count = this.myAppointments.filter(apt => apt.status === filter.key).length
        }
      })
    },

    // 查看预约详情
    viewAppointmentDetail(appointment) {
      const statusText = this.getStatusText(appointment.status)
      const dateText = this.formatDate(appointment.appointmentDate)
      
      let content = `预约信息：\n医院：${appointment.hospitalName}\n科室：${appointment.departmentName}\n医生：${appointment.doctorName}\n日期：${dateText}\n时间：${appointment.timeSlot}\n状态：${statusText}\n挂号费：¥${appointment.price}`
      
      if (appointment.queueNumber) {
        content += `\n排队号：${appointment.queueNumber}`
      }
      
      if (appointment.patientInfo) {
        content += `\n患者：${appointment.patientInfo.name}`
        if (appointment.patientInfo.phone) {
          content += `\n电话：${appointment.patientInfo.phone}`
        }
      }
      
      uni.showModal({
        title: '预约详情',
        content,
        confirmText: '知道了',
        showCancel: false
      })
    },

    // 取消预约
    async cancelAppointment(appointment) {
      const result = await uni.showModal({
        title: '确认取消',
        content: '确定要取消这个预约吗？',
        confirmText: '确认取消',
        cancelText: '我再想想'
      })

      if (result.confirm) {
        try {
          await this.cancelAppointmentById(appointment.id)
          uni.showToast({
            title: '取消成功',
            icon: 'success'
          })
          this.refreshData()
        } catch (error) {
          uni.showToast({
            title: '取消失败',
            icon: 'error'
          })
        }
      }
    },

    // 改期预约
    rescheduleAppointment(appointment) {
      uni.showModal({
        title: '预约改期',
        content: '是否要重新预约该医生的其他时间？\n\n注意：改期将先取消当前预约，然后进入预约流程选择新的时间。',
        confirmText: '确认改期',
        cancelText: '取消',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 先取消当前预约
              await this.cancelAppointmentById(appointment.id)
              
              // 重置选择状态并预填信息
              this.selectedHospital = this.filteredHospitals.find(h => h.id === appointment.hospitalId) || null
              this.selectedDepartment = null
              this.selectedDoctor = null
              this.selectedDate = ''
              this.selectedTimeSlot = ''
              
              // 切换到预约页面
              this.switchTab('booking')
              
              // 延时加载对应科室和医生
              if (this.selectedHospital) {
                setTimeout(() => {
                  this.loadDepartments(this.selectedHospital.id)
                  setTimeout(() => {
                    const dept = this.filteredDepartments.find(d => d.id === appointment.departmentId)
                    if (dept) {
                      this.selectDepartment(dept)
                      setTimeout(() => {
                        const doctor = this.filteredDoctors.find(d => d.id === appointment.doctorId)
                        if (doctor) {
                          this.selectDoctor(doctor)
                        }
                      }, 300)
                    }
                  }, 300)
                }, 300)
              }
              
              uni.showToast({
                title: '原预约已取消，请选择新时间',
                icon: 'none',
                duration: 3000
              })
            } catch (error) {
              uni.showToast({
                title: '改期失败，请重试',
                icon: 'error'
              })
            }
          }
        }
      })
    },

    // 加载科室数据
    async loadDepartments(hospitalId) {
      try {
        console.log('加载科室:', hospitalId)
        // 调用store中的getDepartments action
        await this.getDepartments({ hospitalId })
        
        // computed属性会自动从store获取数据
      } catch (error) {
        console.error('加载科室失败:', error)
        // 不显示错误提示，静默回退到Mock数据
      }
    },

    // 加载医生数据
    async loadDoctors(departmentId) {
      try {
        console.log('加载医生:', departmentId)
        // 调用store中的getDoctors action
        await this.getDoctors({ 
          departmentId, 
          date: this.selectedDate 
        })
        
        // computed属性会自动从store获取数据
      } catch (error) {
        console.error('加载医生失败:', error)
        uni.showToast({
          title: '医生加载失败',
          icon: 'error'
        })
      }
    },

    // 加载时间段数据
    async loadTimeSlots(doctorId, date) {
      try {
        console.log('加载时间段:', doctorId, date)
        // 调用store中的getTimeSlots action
        await this.getTimeSlots({ 
          doctorId, 
          date 
        })
        
        // computed属性会自动从store获取数据
      } catch (error) {
        console.error('加载时间段失败:', error)
        // 静默回退到Mock数据，不显示错误提示
      }
    },

    // 格式化日期
    formatDate(dateStr) {
      const date = new Date(dateStr)
      const today = new Date()
      const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000)
      
      if (date.toDateString() === today.toDateString()) {
        return '今天'
      } else if (date.toDateString() === tomorrow.toDateString()) {
        return '明天'
      } else {
        return date.toLocaleDateString('zh-CN')
      }
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待确认',
        'confirmed': '已确认',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style lang="scss" scoped>
.appointment-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8faff 0%, #f1f5f9 100%);
  padding-bottom: 40rpx;
}

/* 顶部导航 - 现代简约风 */
.header-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

  .nav-tabs {
    display: flex;
    flex-direction: row;
    height: 120rpx;
    margin: 0 40rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2rpx;
      background: rgba(0, 0, 0, 0.06);
    }

    .nav-tab {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #64748b;
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 500;

      &.active {
        color: #1e293b;
        font-weight: 600;

        &::after {
          content: '';
          position: absolute;
          bottom: -2rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background: linear-gradient(90deg, #3b82f6, #1d4ed8);
          border-radius: 3rpx;
          box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
        }
      }
    }
  }
}

/* 通用区块样式 - 现代简约风 */
.section {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10rpx);
  margin: 32rpx 40rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 
    0 1rpx 3rpx rgba(0, 0, 0, 0.05),
    0 20rpx 25rpx -5rpx rgba(0, 0, 0, 0.04),
    0 10rpx 10rpx -5rpx rgba(0, 0, 0, 0.02);
  border: 1rpx solid rgba(255, 255, 255, 0.2);

  .section-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 40rpx 32rpx;
    border-bottom: 1rpx solid rgba(148, 163, 184, 0.1);
    background: rgba(248, 250, 252, 0.5);

    .section-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.025em;
    }
  }
}

/* 医院选择区域 - 现代简约风 */
.hospital-section {
  .location-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(135deg, #e0e7ff, #f0f4ff);
    padding: 16rpx 24rpx;
    border-radius: 16rpx;
    color: #3730a3;
    font-size: 24rpx;
    font-weight: 500;
    transition: all 0.3s ease;

    .icon-location {
      margin-right: 12rpx;
      font-size: 28rpx;
      color: #4338ca;
    }

    .location-text {
      max-width: 160rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .hospital-search {
    padding: 0 40rpx 40rpx;

    .search-box {
      position: relative;
      background: rgba(248, 250, 252, 0.8);
      border: 2rpx solid rgba(148, 163, 184, 0.1);
      border-radius: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 28rpx 32rpx;
      backdrop-filter: blur(10rpx);
      transition: all 0.3s ease;

      &:focus-within {
        border-color: #3b82f6;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.1);
      }

      .search-icon {
        color: #94a3b8;
        font-size: 32rpx;
        margin-right: 20rpx;
      }

      .search-input {
        flex: 1;
        font-size: 30rpx;
        color: #1e293b;
        background: none;
        border: none;
        outline: none;
        font-weight: 500;

        &::placeholder {
          color: #94a3b8;
        }
      }
    }
  }

  .hospital-list {
    .hospital-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 36rpx 40rpx;
      border-bottom: 1rpx solid rgba(148, 163, 184, 0.08);
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:last-child {
        border-bottom: none;
      }

      &.selected {
        background: linear-gradient(135deg, #eff6ff, #f0f9ff);
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 6rpx;
          background: linear-gradient(180deg, #3b82f6, #1d4ed8);
          border-radius: 0 3rpx 3rpx 0;
        }
      }

      &:active {
        transform: translateY(-2rpx);
        background: rgba(59, 130, 246, 0.02);
      }

      .hospital-info {
        flex: 1;

        .hospital-name {
          font-size: 34rpx;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 12rpx;
          letter-spacing: -0.025em;
        }

        .hospital-level {
          display: inline-block;
          background: linear-gradient(135deg, #3b82f6, #1e40af);
          color: white;
          font-size: 20rpx;
          font-weight: 600;
          padding: 6rpx 16rpx;
          border-radius: 12rpx;
          margin-bottom: 16rpx;
          box-shadow: 0 2rpx 4rpx rgba(59, 130, 246, 0.2);
        }

        .hospital-address {
          font-size: 26rpx;
          color: #64748b;
          line-height: 1.4;
          font-weight: 400;
        }
      }

      .hospital-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        margin-right: 32rpx;

        .hospital-distance {
          font-size: 24rpx;
          color: #475569;
          margin-bottom: 12rpx;
          font-weight: 500;
          background: rgba(148, 163, 184, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
        }

        .hospital-status {
          font-size: 22rpx;
          font-weight: 500;
          padding: 8rpx 16rpx;
          border-radius: 12rpx;
          backdrop-filter: blur(10rpx);

          &.open {
            background: linear-gradient(135deg, #dcfce7, #f0fdf4);
            color: #166534;
            border: 1rpx solid rgba(34, 197, 94, 0.2);
          }

          &.busy {
            background: linear-gradient(135deg, #fef3c7, #fffbeb);
            color: #a16207;
            border: 1rpx solid rgba(245, 158, 11, 0.2);
          }
        }
      }

      .select-indicator {
        color: #3b82f6;
        font-size: 40rpx;
        filter: drop-shadow(0 2rpx 4rpx rgba(59, 130, 246, 0.2));
      }
    }
  }
}

/* 科室选择区域 - 现代简约风 */
.department-section {
  .filter-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    padding: 16rpx 24rpx;
    border-radius: 16rpx;
    color: #475569;
    font-size: 24rpx;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1rpx solid rgba(148, 163, 184, 0.2);

    &:active {
      transform: scale(0.98);
      background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    }

    .icon-filter {
      margin-right: 12rpx;
      font-size: 28rpx;
      color: #64748b;
    }
  }

  .department-categories {
    padding: 0 40rpx 32rpx;

    .category-scroll {
      white-space: nowrap;
    }

    .category-list {
      display: flex;
      flex-direction: row;
      gap: 20rpx;
      padding: 8rpx 0;

      .category-item {
        background: rgba(248, 250, 252, 0.8);
        color: #64748b;
        font-size: 26rpx;
        font-weight: 500;
        padding: 20rpx 32rpx;
        border-radius: 20rpx;
        white-space: nowrap;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2rpx solid transparent;
        backdrop-filter: blur(10rpx);

        &.active {
          background: linear-gradient(135deg, #3b82f6, #1e40af);
          color: white;
          font-weight: 600;
          border-color: rgba(59, 130, 246, 0.3);
          box-shadow: 
            0 4rpx 12rpx rgba(59, 130, 246, 0.2),
            0 0 0 1rpx rgba(59, 130, 246, 0.1);
        }

        &:not(.active):active {
          background: rgba(59, 130, 246, 0.1);
          transform: scale(0.98);
        }
      }
    }
  }

  .department-list {
    .department-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 36rpx 40rpx;
      border-bottom: 1rpx solid rgba(148, 163, 184, 0.08);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;

      &:last-child {
        border-bottom: none;
      }

      &.selected {
        background: linear-gradient(135deg, #eff6ff, #f0f9ff);
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 6rpx;
          background: linear-gradient(180deg, #3b82f6, #1d4ed8);
          border-radius: 0 3rpx 3rpx 0;
        }
      }

      &:active {
        transform: translateY(-2rpx);
        background: rgba(59, 130, 246, 0.02);
      }

      .department-info {
        flex: 1;

        .department-name {
          font-size: 34rpx;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 12rpx;
          letter-spacing: -0.025em;
        }

        .department-desc {
          font-size: 28rpx;
          color: #64748b;
          margin-bottom: 20rpx;
          line-height: 1.5;
          font-weight: 400;
        }

        .department-stats {
          display: flex;
          flex-direction: row;
          gap: 32rpx;

          .stat-item {
            font-size: 24rpx;
            color: #94a3b8;
            background: rgba(148, 163, 184, 0.1);
            padding: 8rpx 16rpx;
            border-radius: 12rpx;
            font-weight: 500;
            backdrop-filter: blur(10rpx);
          }
        }
      }

      .department-arrow {
        color: #cbd5e1;
        font-size: 32rpx;
        margin-left: 16rpx;
        transition: all 0.3s ease;
      }

      &:active .department-arrow {
        transform: translateX(4rpx);
        color: #3b82f6;
      }
    }
  }
}

/* 医生选择区域 - 现代简约风 */
.doctor-section {
  .date-selector {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    padding: 20rpx 32rpx;
    border-radius: 20rpx;
    color: #1e40af;
    font-size: 26rpx;
    font-weight: 600;
    border: 2rpx solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(10rpx);

    &:active {
      transform: scale(0.98);
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    }

    .selected-date {
      margin-right: 16rpx;
      color: #1d4ed8;
    }

    .icon-calendar {
      font-size: 32rpx;
      color: #3b82f6;
    }
  }

  .doctor-list {
    .doctor-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 40rpx;
      border-bottom: 1rpx solid rgba(148, 163, 184, 0.08);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        transform: translateY(-4rpx);
        background: rgba(59, 130, 246, 0.02);
        box-shadow: 0 8rpx 25rpx -5rpx rgba(0, 0, 0, 0.1);
      }

      .doctor-avatar {
        width: 128rpx;
        height: 128rpx;
        border-radius: 32rpx;
        margin-right: 32rpx;
        overflow: hidden;
        position: relative;
        box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
        border: 4rpx solid rgba(255, 255, 255, 0.8);

        .avatar-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        &::after {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: 28rpx;
          background: linear-gradient(45deg, transparent 70%, rgba(59, 130, 246, 0.1));
        }
      }

      .doctor-info {
        flex: 1;

        .doctor-name {
          font-size: 36rpx;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 12rpx;
          letter-spacing: -0.025em;
        }

        .doctor-title {
          font-size: 26rpx;
          color: #3b82f6;
          margin-bottom: 12rpx;
          font-weight: 600;
          background: rgba(59, 130, 246, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          display: inline-block;
        }

        .doctor-specialty {
          font-size: 26rpx;
          color: #64748b;
          margin-bottom: 12rpx;
          font-weight: 500;
        }

        .doctor-experience {
          font-size: 24rpx;
          color: #94a3b8;
          background: rgba(148, 163, 184, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 8rpx;
          display: inline-block;
        }
      }

      .doctor-rating {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-right: 32rpx;
        background: rgba(255, 255, 255, 0.8);
        padding: 16rpx 20rpx;
        border-radius: 16rpx;
        backdrop-filter: blur(10rpx);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

        .rating-stars {
          display: flex;
          flex-direction: row;
          gap: 4rpx;
          margin-bottom: 12rpx;
          justify-content: center;

          .icon-star {
            font-size: 28rpx;
            color: #e2e8f0;
            transition: all 0.2s ease;

            &.filled {
              color: #f59e0b;
              filter: drop-shadow(0 1rpx 2rpx rgba(245, 158, 11, 0.3));
            }
          }
        }

        .rating-score {
          font-size: 28rpx;
          color: #0f172a;
          font-weight: 700;
        }
      }

      .doctor-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        background: linear-gradient(135deg, #fef2f2, #fce7e7);
        padding: 20rpx 24rpx;
        border-radius: 16rpx;
        border: 2rpx solid rgba(239, 68, 68, 0.1);

        .price-label {
          font-size: 22rpx;
          color: #991b1b;
          display: block;
          margin-bottom: 8rpx;
          font-weight: 500;
        }

        .price-value {
          font-size: 36rpx;
          font-weight: 800;
          color: #dc2626;
          line-height: 1;
        }
      }
    }
  }
}

/* 时间选择区域 - 现代简约风 */
.time-section {
  .period-toggle {
    display: flex;
    flex-direction: row;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 20rpx;
    overflow: hidden;
    padding: 6rpx;
    backdrop-filter: blur(10rpx);
    border: 2rpx solid rgba(148, 163, 184, 0.1);

    .period-item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #64748b;
      border-radius: 16rpx;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      &.active {
        background: linear-gradient(135deg, #3b82f6, #1e40af);
        color: white;
        box-shadow: 
          0 4rpx 12rpx rgba(59, 130, 246, 0.3),
          0 2rpx 4rpx rgba(59, 130, 246, 0.2);
        transform: scale(1.02);
      }

      &:not(.active):active {
        background: rgba(59, 130, 246, 0.1);
        transform: scale(0.98);
      }
    }
  }

  .time-slots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20rpx;
    padding: 40rpx;

    .time-slot {
      flex: 0 0 calc(50% - 10rpx);
      background: rgba(255, 255, 255, 0.8);
      border-radius: 20rpx;
      padding: 32rpx 20rpx;
      text-align: center;
      border: 2rpx solid rgba(148, 163, 184, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10rpx);
      position: relative;

      &.selected {
        background: linear-gradient(135deg, #eff6ff, #dbeafe);
        border-color: #3b82f6;
        color: #1e40af;
        transform: translateY(-4rpx);
        box-shadow: 
          0 8rpx 25rpx -5rpx rgba(59, 130, 246, 0.2),
          0 4rpx 12rpx rgba(59, 130, 246, 0.1);

        &::before {
          content: '';
          position: absolute;
          top: 12rpx;
          right: 12rpx;
          width: 24rpx;
          height: 24rpx;
          background: #3b82f6;
          border-radius: 50%;
          box-shadow: 0 2rpx 4rpx rgba(59, 130, 246, 0.3);
        }

        &::after {
          content: '✓';
          position: absolute;
          top: 16rpx;
          right: 16rpx;
          color: white;
          font-size: 16rpx;
          font-weight: 700;
        }
      }

      &.disabled {
        background: rgba(241, 245, 249, 0.6);
        color: #cbd5e1;
        border-color: rgba(203, 213, 225, 0.3);
        cursor: not-allowed;

        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8rpx,
            rgba(203, 213, 225, 0.2) 8rpx,
            rgba(203, 213, 225, 0.2) 16rpx
          );
          border-radius: 18rpx;
        }
      }

      &:not(.disabled):not(.selected):active {
        transform: scale(0.98);
        background: rgba(59, 130, 246, 0.05);
      }

      .slot-time {
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 12rpx;
        color: inherit;
        letter-spacing: -0.025em;
      }

      .slot-status {
        font-size: 24rpx;
        font-weight: 500;
        opacity: 0.8;
      }
    }
  }
}

/* 预约确认区域 - 现代简约风 */
.confirm-section {
  margin: 32rpx 40rpx 60rpx;

  .confirm-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    border-radius: 32rpx;
    overflow: hidden;
    box-shadow: 
      0 8rpx 32rpx rgba(0, 0, 0, 0.08),
      0 4rpx 16rpx rgba(59, 130, 246, 0.1),
      0 0 0 1rpx rgba(255, 255, 255, 0.1);
    border: 1rpx solid rgba(255, 255, 255, 0.2);

    .card-header {
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
      padding: 48rpx 40rpx;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1rpx;
        background: rgba(255, 255, 255, 0.2);
      }

      .card-title {
        font-size: 40rpx;
        font-weight: 800;
        color: white;
        text-align: center;
        letter-spacing: -0.025em;
        position: relative;
        z-index: 1;
      }
    }

    .confirm-info {
      padding: 40rpx;
      background: rgba(248, 250, 252, 0.3);

      .info-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 0;
        border-bottom: 1rpx solid rgba(148, 163, 184, 0.08);
        transition: all 0.3s ease;

        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }

        &:hover {
          background: rgba(59, 130, 246, 0.02);
          margin: 0 -20rpx;
          padding-left: 20rpx;
          padding-right: 20rpx;
          border-radius: 12rpx;
        }

        .info-label {
          font-size: 28rpx;
          color: #64748b;
          width: 140rpx;
          font-weight: 500;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            right: 16rpx;
            top: 50%;
            transform: translateY(-50%);
            width: 4rpx;
            height: 4rpx;
            background: #94a3b8;
            border-radius: 50%;
          }
        }

        .info-value {
          flex: 1;
          font-size: 30rpx;
          color: #0f172a;
          font-weight: 600;
          letter-spacing: -0.025em;

          &.price {
            color: #dc2626;
            font-weight: 800;
            font-size: 36rpx;
            background: linear-gradient(135deg, #fef2f2, #fee2e2);
            padding: 8rpx 20rpx;
            border-radius: 12rpx;
            border: 2rpx solid rgba(220, 38, 38, 0.1);
            text-align: center;
            box-shadow: 0 2rpx 8rpx rgba(220, 38, 38, 0.1);
          }
        }
      }
    }

    .confirm-btn {
      width: calc(100% - 80rpx);
      margin: 40rpx;
      height: 96rpx;
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
      color: white;
      border: none;
      border-radius: 24rpx;
      font-size: 36rpx;
      font-weight: 700;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 
        0 8rpx 20rpx rgba(59, 130, 246, 0.3),
        0 4rpx 12rpx rgba(59, 130, 246, 0.2);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2));
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:active {
        transform: translateY(2rpx);
        box-shadow: 
          0 4rpx 12rpx rgba(59, 130, 246, 0.3),
          0 2rpx 6rpx rgba(59, 130, 246, 0.2);

        &::before {
          opacity: 1;
        }
      }

      &.loading {
        background: linear-gradient(135deg, #94a3b8, #64748b);
        box-shadow: 
          0 4rpx 12rpx rgba(148, 163, 184, 0.3),
          0 2rpx 6rpx rgba(148, 163, 184, 0.2);
        cursor: not-allowed;
      }

      .loading-icon {
        margin-right: 20rpx;
        animation: rotate 1s linear infinite;
        font-size: 32rpx;
      }
    }
  }
}

/* 我的预约页面 - 现代简约风 */
.appointment-filter {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  padding: 0 40rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border-bottom: 1rpx solid rgba(148, 163, 184, 0.1);

  .filter-tabs {
    display: flex;
    flex-direction: row;
    height: 120rpx;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2rpx;
      background: rgba(148, 163, 184, 0.08);
    }

    .filter-tab {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #64748b;
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 500;

      &.active {
        color: #1e293b;
        font-weight: 700;

        &::after {
          content: '';
          position: absolute;
          bottom: -2rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 6rpx;
          background: linear-gradient(90deg, #3b82f6, #1d4ed8);
          border-radius: 3rpx;
          box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
        }
      }

      .filter-badge {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        font-size: 20rpx;
        font-weight: 600;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        margin-left: 12rpx;
        min-width: 36rpx;
        text-align: center;
        box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
      }
    }
  }
}

.appointment-list {
  padding: 32rpx 40rpx;

  .appointment-item {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10rpx);
    border-radius: 24rpx;
    padding: 40rpx;
    margin-bottom: 24rpx;
    box-shadow: 
      0 4rpx 16rpx rgba(0, 0, 0, 0.04),
      0 2rpx 8rpx rgba(0, 0, 0, 0.02);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;

    &:active {
      transform: translateY(-4rpx);
      box-shadow: 
        0 8rpx 25rpx rgba(0, 0, 0, 0.08),
        0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    }

    .appointment-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .appointment-date {
        font-size: 36rpx;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -0.025em;
      }

      .appointment-status {
        font-size: 24rpx;
        font-weight: 600;
        padding: 8rpx 20rpx;
        border-radius: 16rpx;

        &.confirmed {
          background: linear-gradient(135deg, #dcfce7, #bbf7d0);
          color: #166534;
          border: 1rpx solid rgba(34, 197, 94, 0.2);
        }

        &.completed {
          background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
          color: #475569;
          border: 1rpx solid rgba(148, 163, 184, 0.2);
        }

        &.cancelled {
          background: linear-gradient(135deg, #fef2f2, #fee2e2);
          color: #991b1b;
          border: 1rpx solid rgba(239, 68, 68, 0.2);
        }

        &.pending {
          background: linear-gradient(135deg, #fef3c7, #fde68a);
          color: #a16207;
          border: 1rpx solid rgba(245, 158, 11, 0.2);
        }
      }
    }

    .appointment-content {
      margin-bottom: 24rpx;

      .appointment-hospital {
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 12rpx;
        letter-spacing: -0.025em;
      }

      .appointment-doctor {
        font-size: 28rpx;
        color: #64748b;
        margin-bottom: 12rpx;
        font-weight: 500;
      }

      .appointment-time {
        font-size: 28rpx;
        color: #3b82f6;
        font-weight: 600;
        background: rgba(59, 130, 246, 0.1);
        padding: 6rpx 16rpx;
        border-radius: 12rpx;
        display: inline-block;
      }
    }

    .appointment-actions {
      display: flex;
      flex-direction: row;
      gap: 20rpx;
      margin-top: 32rpx;

      .action-btn {
        flex: 1;
        height: 72rpx;
        border-radius: 16rpx;
        font-size: 28rpx;
        font-weight: 600;
        border: none;
        transition: all 0.3s ease;

        &.cancel-btn {
          background: rgba(248, 250, 252, 0.8);
          color: #64748b;
          border: 2rpx solid rgba(148, 163, 184, 0.2);

          &:active {
            background: rgba(239, 68, 68, 0.1);
            color: #dc2626;
            border-color: rgba(239, 68, 68, 0.3);
          }
        }

        &.reschedule-btn {
          background: linear-gradient(135deg, #3b82f6, #1e40af);
          color: white;
          box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);

          &:active {
            transform: translateY(1rpx);
            box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
          }
        }
      }
    }

    .appointment-queue {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #eff6ff, #dbeafe);
      padding: 24rpx;
      border-radius: 16rpx;
      margin-top: 24rpx;
      border: 2rpx solid rgba(59, 130, 246, 0.2);

      .queue-label {
        font-size: 26rpx;
        color: #1e40af;
        font-weight: 500;
      }

      .queue-number {
        font-size: 36rpx;
        font-weight: 800;
        color: #1d4ed8;
        margin-left: 12rpx;
        letter-spacing: -0.025em;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 160rpx 40rpx;

    .empty-image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 40rpx;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 32rpx;
      color: #94a3b8;
      margin-bottom: 60rpx;
      font-weight: 500;
    }

    .empty-btn {
      width: 240rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #3b82f6, #1e40af);
      color: white;
      border: none;
      border-radius: 20rpx;
      font-size: 28rpx;
      font-weight: 600;
      box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
      transition: all 0.3s ease;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
      }
    }
  }
}

/* 动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 750rpx) {
  .time-slots {
    .time-slot {
      flex: 0 0 100%;
    }
  }
}
</style>